import { Tabs } from 'antd';
import ZLink from 'components/ZLink';
import React from 'react';
import './index.less';
const css = 'boder-and-background';
export default () => {
    return (
        <section className={css}>
            <Tabs>
                <Tabs.TabPane tab="半透明边框" key="1">
                    <div className={css + '-background-clip'}>
                        A paragraph of filler text. La la la de dah de dah de dah de la
                    </div>
                    默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，
                    <br />
                    在css3中，我们可以通过设置background-clip:padding-box来改变背景的默认行为，达到我们想要的效果。
                </Tabs.TabPane>
                <Tabs.TabPane tab="多重边框" key="2">
                    <div className={css + '-box-shadow'}></div>
                    <div className={css + '-outline'}></div>
                    box-shadow相信很多人都已经用透了，可用来给元素添加各种阴影效果，反过来，也只有我们需要实现阴影时才会想起它，其实，box-shadow还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相当于一条实线“边框”。
                    <br />
                    box-shadow只能模拟实线边框效果，某些情况下，我们可能需要生成虚线的边框效果，我们可以通过类似于border的描边outline和对应的描边偏移outline-offset来实现。
                </Tabs.TabPane>
                <Tabs.TabPane tab="边框内圆角" key="3">
                    <div className={css + '-border-radius'}>
                        A paragraph of filler text. La la la de dah de dah de dah de la.
                    </div>
                    我们知道box-shadow是会紧贴border-radius圆角边的，但是，描边outline并不会与圆角边border-radius贴合，我们可以将两者组合，通过box-shadow去填补描边outline所产生的间隙来达到我们想要的效果。
                </Tabs.TabPane>
                <Tabs.TabPane tab="背景定位" key="4">
                    <div className={css + '-background-position'}>
                        <div className="block1">background-position方案</div>
                        <div className="block2">background-origin方案</div>
                        <div className="block3">calc方案</div>
                    </div>
                    <ZLink href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position" label="background-position" />
                    <ZLink href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin" label="background-origin" />
                    <ZLink href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()" label="calc" />
                </Tabs.TabPane>
                <Tabs.TabPane tab="条纹背景" key="5">
                    <div className={css + '-progress'}>
                        <div className="progress-outer">
                            <div className="progress-enter">
                                <div className="progress-bg"></div>
                            </div>
                        </div>
                    </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="不规则卡片" key="6">
                    <div className={css + "-coupon-card"}></div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="1px边" key="7">
                    <div className={css + '-px'}>
                        <span className="one-pixel-line shadow"></span>
                        1
                    </div>
                </Tabs.TabPane>
            </Tabs>
        </section>
    );
};
